<template>
  <section class="app-main">
    <!-- 当前系统内路由-加载系统内组件 -->
    <template v-if="iframeHref === ''">
      <!-- <transition name="fade-transform" mode="out-in">
        <keep-alive :include="cachedViews">
          <router-view :key="key"></router-view>
        </keep-alive>
      </transition> -->
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </template>
    <!-- 三方系统通过iframe加载 -->
    <template v-else>
      <iframe class="main-iframe" v-bind:src="iframeHref" frameborder="0"></iframe>
    </template>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    // 监听如果是通过系统路由跳转
    key() {
      return this.$route.fullPath
    },
    ...mapGetters([
      'iframeHref'
    ])
  }
}
</script>

<style scoped>
.app-main {
  /*84 = navbar + tags-view = 50 +34 */
  /* min-height: calc(100vh - 141px); */
  min-height: calc(100vh - 80px);
  position: relative;
  overflow: hidden;
}
.main-iframe{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>

